<script setup lang="ts">
import { computed } from 'vue'
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'

// 定义props
const props = defineProps<{
  currentPage: number,
  totalCount: number,
  pageSize: number
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'page-change', page: number): void
}>()

// 总页数
const totalPages = computed(() => {
  return Math.ceil(props.totalCount / props.pageSize)
})

// 页码数组
const pageNumbers = computed(() => {
  const pages = []
  const maxVisiblePages = 5
  
  if (totalPages.value <= maxVisiblePages) {
    // 如果总页数小于等于最大可见页数，则显示所有页码
    for (let i = 1; i <= totalPages.value; i++) {
      pages.push(i)
    }
  } else {
    // 否则，显示部分页码
    let startPage = Math.max(1, props.currentPage - Math.floor(maxVisiblePages / 2))
    let endPage = Math.min(totalPages.value, startPage + maxVisiblePages - 1)
    
    // 如果endPage达到总页数，则调整startPage
    if (endPage === totalPages.value) {
      startPage = Math.max(1, endPage - maxVisiblePages + 1)
    }
    
    // 添加首页
    if (startPage > 1) {
      pages.push(1)
      if (startPage > 2) pages.push('...')
    }
    
    // 添加中间页码
    for (let i = startPage; i <= endPage; i++) {
      pages.push(i)
    }
    
    // 添加尾页
    if (endPage < totalPages.value) {
      if (endPage < totalPages.value - 1) pages.push('...')
      pages.push(totalPages.value)
    }
  }
  
  return pages
})

// 上一页
const prevPage = () => {
  if (props.currentPage > 1) {
    emit('page-change', props.currentPage - 1)
  }
}

// 下一页
const nextPage = () => {
  if (props.currentPage < totalPages.value) {
    emit('page-change', props.currentPage + 1)
  }
}

// 跳转到指定页
const goToPage = (page: number) => {
  if (page !== props.currentPage && page >= 1 && page <= totalPages.value) {
    emit('page-change', page)
  }
}
</script>

<template>
  <div v-if="totalPages > 1" class="flex justify-between items-center mt-6 px-4 py-3 bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="flex-1 flex justify-between sm:hidden">
      <button
        @click="prevPage"
        :disabled="currentPage === 1"
        :class="[
          currentPage === 1 ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
          'relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md'
        ]"
      >
        上一页
      </button>
      <button
        @click="nextPage"
        :disabled="currentPage === totalPages"
        :class="[
          currentPage === totalPages ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
          'ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md'
        ]"
      >
        下一页
      </button>
    </div>
    
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
      <div>
        <p class="text-sm text-gray-700 dark:text-gray-300">
          显示第 <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span> 至 
          <span class="font-medium">{{ Math.min(currentPage * pageSize, totalCount) }}</span> 条，
          共 <span class="font-medium">{{ totalCount }}</span> 条结果
        </p>
      </div>
      
      <div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <!-- 上一页按钮 -->
          <button
            @click="prevPage"
            :disabled="currentPage === 1"
            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
            :class="{ 'cursor-not-allowed': currentPage === 1 }"
          >
            <span class="sr-only">上一页</span>
            <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
          </button>
          
          <!-- 页码 -->
          <template v-for="(page, index) in pageNumbers" :key="index">
            <span
              v-if="page === '...'"
              class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              ...
            </span>
            <button
              v-else
              @click="goToPage(page as number)"
              :class="[
                page === currentPage ? 'z-10 bg-primary-50 dark:bg-primary-900 border-primary-500 dark:border-primary-500 text-primary-600 dark:text-primary-300' : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700',
                'relative inline-flex items-center px-4 py-2 border text-sm font-medium'
              ]"
            >
              {{ page }}
            </button>
          </template>
          
          <!-- 下一页按钮 -->
          <button
            @click="nextPage"
            :disabled="currentPage === totalPages"
            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
            :class="{ 'cursor-not-allowed': currentPage === totalPages }"
          >
            <span class="sr-only">下一页</span>
            <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
          </button>
        </nav>
      </div>
    </div>
  </div>
</template> 